<!--
 * @Description:
 * @Author: Devin
 * @Date: 2021-11-05 15:14:13
 * @LastEditTime: 2022-04-18 16:51:50
 * @LastEditors: Devin
 * @Reference:
-->
<template>
  <div class="components">
    <div class="left">
      <el-card id="普通按钮">
        <template #header>
          <div class="el-card-header">普通按钮</div>
          <div class="el-card-header-tip">进行了主题色配置，其他未做改变</div>
        </template>
        <CcButton @click="chang"> 按钮 </CcButton>
        <CcButton type="text"> 按钮 </CcButton>
        <CcButton class="iconfont cc-xia" @click="() => {}"> 按钮 </CcButton>
        <Code><div v-html="code.code"></div></Code>
      </el-card>
      <el-card id="禁用按钮">
        <template #header>
          <div class="el-card-header">禁用按钮</div>
        </template>

        <CcButton type="text" disabled> 按钮 </CcButton>
        <CcButton class="iconfont cc-xia" disabled> 按钮 </CcButton>
        <Code><div v-html="code.code1"></div></Code>
      </el-card>
      <el-card id="加载状态按钮">
        <template #header>
          <div class="el-card-header">加载状态按钮</div>
        </template>
        <CcButton loading> 按钮 </CcButton>
        <Code><div v-html="code.code2"></div></Code>
      </el-card>
      <el-card id="配合Popover的特殊情况">
        <template #header>
          <div class="el-card-header">配合Popover的特殊情况</div>
          <div class="el-card-header-tip">
            原生的 disabled 的 button 不会触发鼠标，因此 el-tooltip, el-popover
            无法监听到相关的事件。如果你需要在这种情况下使用，可以使用 tag 属性来调整 button 的行为。
          </div>
        </template>
        <el-tooltip content="一点小惊喜" placement="top" effect="light">
          <CcButton tag="div" :disabled="true"> 按钮 </CcButton>
        </el-tooltip>
        <Code><div v-html="code.code3"></div></Code>
      </el-card>
    </div>

    <div class="right"><CcAnchor :sections="sections" :offset="120" width="150px"> </CcAnchor></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import code from './code';
import CcButton from '@/components/packages/cc-button/src/main.vue';
export default defineComponent({
  components: { CcButton },
  setup() {
    const state = reactive({
      code,
      sections: [{ label: '普通按钮' }, { label: '禁用按钮' }, { label: '加载状态按钮' }]
    });
    const chang = () => {
      console.log(123);
    };
    return { ...toRefs(state), chang };
  }
});
</script>

<style scoped></style>
